<template>
  <view
    style="
      display: flex;
      border-radius: 20rpx;
      background-color: #fff;
      position: relative;
    "
  >
    <view style="position: relative">
      <image
        :src="short.imageUrl"
        style="
          width: 334rpx;
          height: 392rpx;
          border-top-left-radius: 20rpx;
          border-bottom-left-radius: 20rpx;
          vertical-align: bottom;
        "
      />
      <view
        style="
          position: absolute;
          left: 24rpx;
          top: 334rpx;
          display: flex;
          align-items: center;
          column-gap: 12rpx;
        "
      >
        <image
          src="http://llg.qiniu.comeinvip.com/images/short_ico.png"
          style="width: 28rpx; height: 28rpx; vertical-align: bottom"
        />
        <view style="font-size: 30rpx; line-height: 42rpx; color: #fff"
          >{{ short.playCount }}播放</view
        >
      </view>
    </view>
    <view style="display: flex; flex-direction: column; padding: 22rpx">
      <view
        style="
          font-size: 36rpx;
          line-height: 50rpx;
          color: #333;
          font-weight: bold;
        "
        >{{ short.title }}</view
      >
      <view
        style="
          margin-top: 12rpx;
          font-size: 24rpx;
          line-height: 34rpx;
          color: #666;
          width: 296rpx;
          height: 68rpx;
          overflow: hidden;
        "
        >{{ _.truncate(short.description, { length: 20 }) }}</view
      >
      <view
        style="
          margin-top: 40rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #666;
        "
      >
        <view>{{ short.shortType }} </view>
        <image
          src="http://llg.qiniu.comeinvip.com/images/diandian.png"
          style="width: 8rpx; height: 8rpx; vertical-align: bottom"
        ></image>
        <view>{{ short.videoCount }}集</view>
      </view>
      <view
        style="
          width: 170rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fbd632;
          font-size: 24rpx;
          line-height: 34rpx;
          color: #333;
          border-radius: 48rpx;
          font-weight: bold;
          position: absolute;
          right: 24rpx;
          bottom: 24rpx;
        "
      >
        立即观看
      </view>
    </view>
  </view>
</template>
<script>
import Short from "@/pages/members/collect/component/short/index";
export default {
  name: "short-component",
  props: {
    short: {
      type: Short,
    },
  },
};
</script>
